<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <div>
      <vxe-grid
        :height="curHeight"
        size="mini"
        align="center"
        highlight-hover-row
        stripe
        row-key
        row-id="selectedRowKeys"
        id="id"
        keep-source
        :loading="loading"
        column-min-width="150"
        border
        resizable
        auto-resize
        showOverflow
        showHeaderOverflow
        :pager-config="tablePage"
        ref="xGrid"
        :row-config="{ useKey: true,keyField: 'id',isCurrent:true,isHover:true}"
        :checkbox-config="{
          checkRowKeys:selectedRowKeys,
          trigger: 'row',
          highlight: true,
          reserve: true}"
        @sort-change="sortChange"
        @checkbox-change="checkboxChangeEvent"
        @checkbox-all="checkboxChangeEvent"
        :data="dataSource"
        :columns="columns"
        @page-change="handlePageChange"
      >
        <template v-slot:top>
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" icon="plus">新建角色</a-button>
            <!--<a-button @click="handleEdit(model1)" type="primary" icon="plus">角色编辑</a-button>-->
            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
              <a-button type="primary" icon="import">导入</a-button>
            </a-upload>
            <a-button type="primary" icon="download" @click="handleExportXls('角色管理')">导出</a-button>
            <j-super-query :fieldList="superQueryFieldList" @handleSuperQuery="handleSuperQuery"/>
            <a-dropdown v-if="selectedRowKeys.length > 0">
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1">
                  <a-icon type="delete"/>
                  删除
                </a-menu-item>
              </a-menu>
              <a-button type="primary" icon="down">批量操作</a-button>
            </a-dropdown>
          </div>
        </template>
        <template v-slot:operate="{ row }">
          <a-button type="primary" shape="circle" @click="handleEdit(row)" icon="edit"/>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a-button type="primary" shape="circle" class="ant-dropdown-link" icon="setting"/>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handlePermission(row.id)">授权</a>
              </a-menu-item>
              <a-menu-item>
                <a @click="handlePdaPermission(row.id)">PDA授权</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleDelete(row.id)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
        <template v-slot:empty>
          <a-empty/>
        </template>
      </vxe-grid>
      <user-role-modal ref="modalUserRole"></user-role-modal>
      <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
      <sys-app-menu-modal ref="SysAppMenuModal" @ok="modalFormOk"></sys-app-menu-modal>
    </div>
  </a-card>
</template>
<script>
  import {HYListMixin} from '@/mixins/HYListMixin'
  import RoleModal from './modules/RoleModal'
  import UserRoleModal from './modules/UserRoleModal'
  import SysAppMenuModal from './SysAppMenuModal'

  export default {
    name: 'RoleUserList',
    mixins: [HYListMixin],
    components: {
      UserRoleModal,
      RoleModal,
      SysAppMenuModal
    },
    data() {
      return {
        description: '角色管理页面',
        columns: [
          {type: "checkbox", width: 50, align: "center"},//多选
          {type: "seq", width: 50, align: "center"},//
          {title: '角色编码', align: 'center', field: 'roleCode'},
          {title: '角色名称', align: 'center', field: 'roleName'},
          {title: '创建时间', align: 'center', field: 'createTime', remoteSort: true},
          {title: '操作', fixed: 'right', width: 105, slots: {default: 'operate'}}
        ],
        superQueryFieldList: [
          {type: 'input', value: 'roleCode', text: '角色编码'},
          {type: 'input', value: 'roleName', text: '角色名称'}
        ],
        url: {
          list: '/sys/role/list',
          delete: '/sys/role/delete',
          deleteBatch: '/sys/role/deleteBatch',
          exportXlsUrl: 'sys/role/exportXls',
          importExcelUrl: 'sys/role/importExcel'
        }
      }
    },
    computed: {
      importExcelUrl: function() {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
      },
    },
    methods: {
      handleMenuClick(e) {
        if (e.key == 1) {
          this.batchDel();
        }
      },
      handlePermission(roleId){
        this.$refs.modalUserRole.show(roleId);
      },
      handlePdaPermission(roleId){
        this.$refs.SysAppMenuModal.show(roleId);
      },
    }
  }
</script>